

<template>
  <div>
    <div class="board">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>影厅管理</el-breadcrumb-item>
        <el-breadcrumb-item>场次信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bill-management-container">
      <div style='padding:8px 0px'>
      <el-row :gutter="24">
        <el-col :span="4" >
          <el-input v-model="pageData.searchText" placeholder="搜索电影名称" autocomplete="off" />
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click='handerSearch'>查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click='addDialogVisible=true'>新增</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="pageData.records" style="width: 100%" :header-cell-style="{background: '#800000'}">
      <el-table-column label="电影名称" width="180" header-align="center" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>电影名称: {{ scope.row.movieName }}</div>
              <div>提示: {{ scope.row.sessionTips }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.movieName }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="影厅" width="120" header-align="center" align="center">
        <template #default="scope">
          <span>{{ scope.row.hallName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="语言版本" width="120" header-align="center" align="center">
        <template #default="scope">
          <span>{{ scope.row.languageVersion }}</span>
        </template>
      </el-table-column>

      <el-table-column label="场次时间" width="220" header-align="center" align="center">
        <template #default="scope">
          {{ scope.row.playTime }} - {{ scope.row.endTime }}
        </template>
      </el-table-column>

      <el-table-column label="放映日期" width="120" header-align="center" align="center">
        <template #default="scope">
          <span>{{ scope.row.sessionDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="票价" width="100" header-align="center" align="center">
        <template #default="scope">
          <span>¥{{ scope.row.sessionPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="danger" plain @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="pageData.current"
        v-model:page-size="pageData.size"
        :page-sizes="[5,10, 15,20, 25,30]"
        :size="pageData.size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 删除确认对话框 -->
    <el-dialog
        v-model="deleteDialogVisible"
        title="删除提示"
        width="500"
        :before-close="handleClose"
    >
      <span>确认要删除这个场次吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDelete">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增场次" width="600">
      <el-form :model="addObj" label-width="100px">
        <el-form-item label="电影" prop="movieId">
          <el-select v-model="addObj.movieId" placeholder="请选择电影" style="width: 100%">
            <el-option
                v-for="item in movieOptions"
                :key="item.movieId"
                :label="item.movieName"
                :value="item.movieId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="影厅" prop="hallId">
          <el-select v-model="addObj.hallId" placeholder="请选择影厅" style="width: 100%">
            <el-option
                v-for="item in hallOptions"
                :key="item.hallId"
                :label="item.hallName"
                :value="item.hallId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="语言版本" prop="languageVersion">
          <el-select v-model="addObj.languageVersion" placeholder="请选择语言版本" style="width: 100%">
            <el-option label="国语" value="国语"></el-option>
            <el-option label="英语" value="英语"></el-option>
            <el-option label="中文" value="中文"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="放映日期" prop="sessionDate">
          <el-date-picker
              v-model="addObj.sessionDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="开始时间" prop="playTime">
          <el-time-picker
              v-model="addObj.playTime"
              placeholder="选择时间"
              style="width: 100%"
              format="HH:mm"
              value-format="HH:mm">
          </el-time-picker>
        </el-form-item>

        <el-form-item label="票价" prop="sessionPrice">
          <el-input-number v-model="addObj.sessionPrice" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>

        <el-form-item label="影厅提示" prop="sessionTips">
          <el-input v-model="addObj.sessionTips" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlerAddCancel">取消</el-button>
          <el-button type="primary" @click="handlerAdd">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑场次" width="600">
      <el-form :model="editObj" label-width="100px">
        <el-form-item label="电影" prop="movieId">
          <el-select v-model="editObj.movieId" placeholder="请选择电影" style="width: 100%" disabled>
            <el-option
                v-for="item in movieOptions"
                :key="item.movieId"
                :label="item.movieName"
                :value="item.movieId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="影厅" prop="hallId">
          <el-select v-model="editObj.hallId" placeholder="请选择影厅" style="width: 100%">
            <el-option
                v-for="item in hallOptions"
                :key="item.hallId"
                :label="item.hallName"
                :value="item.hallId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="语言版本" prop="languageVersion">
          <el-select v-model="editObj.languageVersion" placeholder="请选择语言版本" style="width: 100%">
            <el-option label="国语" value="国语"></el-option>
            <el-option label="英语" value="英语"></el-option>
            <el-option label="中文" value="中文"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="放映日期" prop="sessionDate">
          <el-date-picker
              v-model="editObj.sessionDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="开始时间" prop="playTime">
          <el-time-picker
              v-model="editObj.playTime"
              placeholder="选择时间"
              style="width: 100%"
              format="HH:mm"
              value-format="HH:mm">
          </el-time-picker>
        </el-form-item>

        <el-form-item label="票价" prop="sessionPrice">
          <el-input-number v-model="editObj.sessionPrice" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>

        <el-form-item label="影厅提示" prop="sessionTips">
          <el-input v-model="editObj.sessionTips" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlerEditCancel">取消</el-button>
          <el-button type="primary" @click="handlerEditCommit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue"
import api from '../api'
import lodash from 'lodash'

const pageData = ref({
  records: [],
  total: 0,
  size: 10,
  current: 1,
  pages: 1,
  searchText: ''
});

const movieOptions = ref([]);
const hallOptions = ref([]);

const handerSearch = () => {
  pageData.value.current = 1;
  getTableList();
}

const deleteDialogVisible = ref(false);
const deleteObj = ref({
  sessionId: '',
  index: -1
});

// 组件挂载后执行的钩子函数
onMounted(function () {
  //
  getMovieOptions();
  getHallOptions();
  getTableList();
});

const addDialogVisible = ref(false);
const addObj = ref({
  movieId: '',
  hallId: '',
  languageVersion: '',
  sessionDate: '',
  playTime: '',
  sessionPrice: 0,
  sessionTips: '',
  seatNums: 0,
  sallNums: 0,
  sessionSeats: '{}'
});

// 获取电影下拉选项
const getMovieOptions = async () => {
  const result = await api.getMovieList();
  movieOptions.value = result;
}

// 获取影厅下拉选项
const getHallOptions = async () => {
  const result = await api.getHallList();
  hallOptions.value = result;
}

// 获取表格数据
const getTableList = async () => {
  const page = {
    current: pageData.value.current,
    size: pageData.value.size,
    searchText: pageData.value.searchText
  }
  if(!page.searchText){
    page.searchText = "";
  }
  const result = await api.getSessionPage(page);

// 添加名称映射逻辑
  result.records.forEach(session => {
    // 映射电影名称
    const movie = movieOptions.value.find(m => m.movieId === session.movieId);
    session.movieName = movie ? movie.movieName : '未知电影';

    // 映射影厅名称
    const hall = hallOptions.value.find(h => h.hallId === session.hallId);
    session.hallName = hall ? hall.hallName : '未知影厅';
  });
  pageData.value = result;
  pageData.value.searchText = page.searchText;
}

const handlerAddCancel = () => {
  addObj.value = {
    movieId: '',
    hallId: '',
    languageVersion: '',
    sessionDate: '',
    playTime: '',
    sessionPrice: 0,
    sessionTips: '',
    seatNums: 0,
    sallNums: 0,
    sessionSeats: '{}'
  };
  addDialogVisible.value = false;
}

const handlerAdd = async () => {
  // 计算结束时间
  const movie = movieOptions.value.find(m => m.movieId === addObj.value.movieId);
  if (movie) {
    const startTime = new Date(`2000-01-01T${addObj.value.playTime}:00`);
    const endTime = new Date(startTime.getTime() + movie.movieLength * 60000);
    addObj.value.endTime = `${endTime.getHours().toString().padStart(2, '0')}:${endTime.getMinutes().toString().padStart(2, '0')}`;

    // 计算截止时间（结束时间+20分钟）
    const deadline = new Date(endTime.getTime() + 20 * 60000);
    addObj.value.deadline = `${deadline.getHours().toString().padStart(2, '0')}:${deadline.getMinutes().toString().padStart(2, '0')}`;
  }

  await api.addSession(addObj.value);
  getTableList();
  addDialogVisible.value = false;
}

const editDialogVisible = ref(false);
const editObj = ref({
  sessionId: '',
  movieId: '',
  hallId: '',
  languageVersion: '',
  sessionDate: '',
  playTime: '',
  sessionPrice: 0,
  sessionTips: '',
  seatNums: 0,
  sallNums: 0,
  sessionSeats: '{}'
});

const handleEdit = (index, row) => {
  editDialogVisible.value = true;
  editObj.value = lodash.clone(row);
}

const handlerEditCancel = () => {
  editDialogVisible.value = false;
}

const handlerEditCommit = async () => {
  // 计算结束时间
  const movie = movieOptions.value.find(m => m.movieId === editObj.value.movieId);
  if (movie) {
    const startTime = new Date(`2000-01-01T${editObj.value.playTime}:00`);
    const endTime = new Date(startTime.getTime() + movie.movieLength * 60000);
    editObj.value.endTime = `${endTime.getHours().toString().padStart(2, '0')}:${endTime.getMinutes().toString().padStart(2, '0')}`;

    // 计算截止时间（结束时间+20分钟）
    const deadline = new Date(endTime.getTime() + 20 * 60000);
    editObj.value.deadline = `${deadline.getHours().toString().padStart(2, '0')}:${deadline.getMinutes().toString().padStart(2, '0')}`;
  }

  await api.editSession(editObj.value);
  getTableList();
  editDialogVisible.value = false;
}

const handleDelete = (index, row) => {
  deleteObj.value.sessionId = row.sessionId;
  deleteObj.value.index = index;
  deleteDialogVisible.value = true;
}

const confirmDelete = async () => {
  await api.deleteSession(deleteObj.value.sessionId);
  pageData.value.records.splice(deleteObj.value.index, 1);
  getTableList();
  deleteDialogVisible.value = false;
}

// 改变分页行数
const handleSizeChange = (val) => {
  pageData.value.size = val;
  getTableList();
}

// 改变当前页码
const handleCurrentChange = (val) => {
  pageData.value.current = val;
  getTableList();
}
</script>
<style>
.bill-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.el-table {
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
</style>